﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="express.aspx.cs" Inherits="Html5.express" %>
<%@ Register Src="~/footer.ascx" TagName="Foot" TagPrefix="uc2" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>
        <%= SectionProxyData.GetSetValue(2)%></title>
    <link type="text/css" href="css/pictip.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="css/common.css" />
    <link type="text/css" rel="stylesheet" href="css/page.css" />
    <link href="css/sweetalert.css" rel="stylesheet" />

    <link type="text/css" rel="stylesheet" href="css/style.css" />

    <link href="css/express.css" rel="stylesheet" />


    <link href="css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" type="text/css" />
    <script src="javascript/jquery.js"></script>

    <script src="javascript/mobiscroll.custom-2.17.0.min.js" type="text/javascript"></script>

    <style type="text/css">
        .ico-open {
            width: 23px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            display: inline-block;
            border: 1px solid #dbdbba;
            color: #998855;
            background: #ffffee;
            border-radius: 3px;
        }
    </style>

</head>

<body id="page_allMenu">
    <input type="hidden" runat="server" id="hfcityjson" />
    <input type="hidden" runat="server" id="hfdatenow" value="" />
    <input type="hidden" runat="server" id="hffeesjon" />
    <div class="page">
        <div id="page_title">
            <a href="myinfolist.aspx" id="back" class=" top_left"></a>
            <h1>跑腿</h1>
            <a class="reg top_right" onclick="showcitybox()" data-ajax="false" href="javascript:">切换城市</a>
        </div>
        <div class="container ">

            <input type="hidden" runat="server" id="hfcityname" value="全国" />
            <input type="hidden" runat="server" id="lat" />
            <input type="hidden" runat="server" id="lng" />

            <input type="hidden" value="0" id="tbcallcount" />
            <!--寄件人经纬度-->
            <input type="hidden" runat="server" id="hidflat" value="0" />
            <input type="hidden" runat="server" id="hidflng" value="0" />
            <!--收件人经纬度-->
            <input type="hidden" runat="server" id="hidtlat" value="0" />
            <input type="hidden" runat="server" id="hidtlng" value="0" />
            <!--配送距离和配送费-->
            <input type="hidden" runat="server" id="hiddistance" value="0" />
            <input type="hidden" runat="server" id="hidsendfee" value="0" />

            <div class="paotui_con" >
                <div class="paotui_song">
                    <p>帮我送</p>
                    <p class="cur" id="sendbtn" onclick="setexpresstype(this,0)"><a href="javascript:"></a></p>
                </div>
                <div class="paotui_mid"></div>
                <div class="paotui_mai">
                    <p>帮我买</p>
                    <p onclick="setexpresstype(this,1)" id="buybtn"><a href="javascript:"></a></p>
                </div>
            </div>
            <ul class="my_order_list orderdetail">
                <li>
                    <div class="order-tit">
                        <span class="time" style="width: 90%;"><strong class="blue">从</strong>
                            <input type="text" id="tbAddress" name="tbAddress" onfocus="showmap($('#tbAddress').val(),'f')" readonly="readonly" class="w_txt ex_long_input" value="" placeholder="小区/大厦/标志性建筑/交叉路口" reg="\S" tip="请输入小区/大厦/标志性建筑/交叉路口" />
                        </span><span class="mess_ch ex_type_tag" style="padding-right: 0;"><i class="ico-open" id="typeiconbox">送</i> </span>
                    </div>
                    <div class="order-tit">
                        <span class="time" style="width: 90%;">
                            <input type="text" id="tbAddressdetail" name="tbAddressdetail" class="w_txt2 ex_long_input" value="" placeholder="具体楼层/门牌号" canbenull="n" reg="\S" tip="请输入具体楼层/门牌号" />
                        </span>
                    </div>
                    <div class="order-tit">
                        <span class="time" style="width: 90%;"><strong class="orange">到</strong>
                            <input type="text" class="w_txt ex_long_input" id="tbOorderid" onfocus="showmap($('#tbOorderid').val(),'t')" readonly="readonly" name="tbOorderid" value="" placeholder="小区/大厦/标志性建筑/交叉路口" reg="\S" tip="请输入小区/大厦/标志性建筑/交叉路口" />
                        </span>
                    </div>
                    <div class="order-tit" style="border-bottom: none;">
                        <span class="time" style="width: 90%;">
                            <input type="text" class="w_txt2 ex_long_input" id="tbOorderiddetail" name="tbOorderiddetail" value="" placeholder="具体楼层/门牌号" reg="\S" tip="请输入具体楼层/门牌号" />
                        </span>
                    </div>
                </li>
                <li>
                    <div class="order-info re" style="background-image: none;">
                        <p class="f14">
                            <span class="xtx_tit">
                                <input type="radio" class="w_txt2" onclick="changeattype(this.value)" value="0" name="rbordertype" />立即取件</span>
                            <span class="xtx_tit">
                                <input type="radio" class="w_txt2" checked="checked" onclick="changeattype(this.value)" value="1" name="rbordertype" />预约取件</span>
                        </p>
                    </div>
                </li>
                <li id="yuyue">
                    <div class="order-info re" style="background-image: none;">
                        <p class="f14">
                            <span class="xtx_tit">预约时间</span>
                            <span class="cat_evt mess">
                                <input type="text" class="w_txt2" id="tbSentTime" name="tbSentTime" onchange="calDistanceAndFee()" style="width: 180px;" onblur="calDistanceAndFee()" value="" placeholder="选择预约时间" reg="\S" tip="选择预约时间" />
                            </span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="order-info-dis bord re">
                        <p class="f14"><span class="xtx_tit">路程</span> <span class="cat_evt mess-dis"><i id="lbdistance">0</i>公里</span></p>
                    </div>
                    <div class="order-info-dis re">
                        <p class="f14"><span class="xtx_tit">跑腿费</span> <span class="cat_evt mess-dis"><i id="lbsendfee">0</i>元</span></p>
                    </div>
                </li>
            </ul>
            <div class="pricing_infor" onclick="shopricetip()">
                <a href="javascript:">
                    <计价说明>
                </a>
            </div>

            <div class="view_back_con">
                <input name="" value="下一步" class="view_back_btn" onclick="nextstep()" type="button" id="btnextstep">
            </div>

        </div>
    </div>


    <script id="priceModule" type="text/x-jsrender">
        <div style="text-align: left;" id="pricetip">
            <dl>
                <dt>跑腿费用：</dt>
                <dd>{{:basedistance}}公里范围内，每单{{:basedistanceprice}}元</dd>
                <dd>{{:basedistance}}-{{:seconddistance}}公里之间，每公里加{{:seconddistancePerPrice}}元</dd>
                <dd>超出{{:seconddistance}}公里后，每公里加{{:thirdDistancePerPrice}}元</dd>
            </dl>
            <dl style="margin-top: 10px;">
                <dt>夜间服务费：</dt>
                <dd>{{:starttime1ShortTime}}-{{:endtime1}}，每单加{{:reveint1}}元</dd>
                <dd>{{:starttime2ShortTime}}-{{:endtime2}}，每单加{{:reveint2}}元</dd>
            </dl>
            <div style="margin-top: 5px;">公里数计算为四舍五入</div>
            <div>
                此计价规则为{{:revevar3}}计价规则<br>
                每个城市具体计价规则不一样
            </div>
        </div>
    </script>


    <div class="mModal" style="z-index: 900; display: none;">
        <a href="javascript:void(0)" style="height: 480px;" id="mymark"></a>
    </div>
    <div class="mDialog freeSet" style="z-index: 901; display: none; top: 50px; width: 90%; height: 80%;"
        data-ffix-top="99" id="maptipbox">
        <div class="content">
            <b></b>
            <div>
                <div class="btn" style="margin: 10px; position: relative; margin-top: 20px;">
                    <input name="keyaddress" class="commonyinput" type="text" id="keyaddress" placeholder="请输入您的位置">
                </div>
                <div style="margin-top: 10px;">
                    <div class="title_tit">历史地址</div>

                    <div id="addressbox" class="geo-search-results ng-scope ui_show ng-hide">
                    </div>
                </div>

            </div>
        </div>
        <a class="x" href="javascript:void(0)">X</a>
    </div>

    <div class="mDialog freeSet" style="z-index: 901; display: none; margin-top: 0px;"
        data-ffix-top="99" id="remarktip">
        <div class="content">
            <h2>选择城市</h2>
            <div class="view_back">
               <div style="margin: 10px; font-size: 14px;">
                我们猜您在：<label id="lbautomyaddress" style="color: red;"></label>
            </div>
                <p>
                    <asp:Repeater runat="server" ID="rptcity">
                        <ItemTemplate>
                            <a href="javascript:;" onclick="selcity('<%# Eval("cname") %>',<%# Eval("cid") %>)">
                                <%# Eval("cname") %></a>
                        </ItemTemplate>
                    </asp:Repeater>
                </p>
            </div>

        </div>
        <a class="x" href="javascript:void(0)">X</a>
    </div>



    <script id="addressTemplate" type="text/x-jsrender">
        {{for #data}}
            <div class="geo-search-result ng-scope">
                <a class="gsr-detail" href="javascript:" onclick="setaddress('{{:lat}}','{{:lng}}','{{:label}}','{{:door}}')">

                    <div class="spot ng-binding">{{:label}}</div>
                    <div style="display: block;" class="address ng-binding">{{:door}}</div>

                </a>
            </div>
        {{/for}}
        
    </script>



</body>
</html>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fMnzyhYs0D1cBEl5iGMQ0Dlg"></script>
<script src="javascript/eventwrapper.min.js"></script>
<script src="javascript/shopcarttool.js?v=0108"></script>
<script src="javascript/jCommon.js?v=0"></script>
<script src="javascript/sweetalert.min.js"></script>
<script src="javascript/express.js?v=10151"></script>


<script src="javascript/spin.min.js"></script>
<script src="javascript/jsrender.js"></script>
<script src="javascript/historyaddress.js?v=1015"></script>

<script type="text/javascript">

    // Date & Time demo initialization

    var ndate = new Date();
    var mintime = dateAdd("h", 1, ndate);
    var maxtime = dateAdd("h", 30, mintime);

    $('#tbSentTime').mobiscroll().datetime({
        theme: $.mobiscroll.defaults.theme,     // Specify theme like: theme: 'ios' or omit setting to use default 
        mode: "scroller",       // Specify scroller mode like: mode: 'mixed' or omit setting to use default 
        display: "bottom", // Specify display mode like: display: 'bottom' or omit setting to use default 
        lang: "zh",       // Specify language like: lang: 'pl' or omit setting to use default
        minDate: mintime,  // More info about minDate: http://docs.mobiscroll.com/2-17-0/datetime#!opt-minDate
        maxDate: maxtime,   // More info about maxDate: http://docs.mobiscroll.com/2-17-0/datetime#!opt-maxDate
        stepMinute: 5  // More info about stepMinute: http://docs.mobiscroll.com/2-17-0/datetime#!opt-stepMinute

    });

    //日期增加函数
    function dateAdd(strInterval, NumDay, dtTmp) {
        if (dtTmp == null | dtTmp == "")
            dtTmp = new Date();
        switch (strInterval) {
            case "h":
                return new Date(Date.parse(dtTmp) + (3600000 * NumDay));
            case "d":
                return new Date(Date.parse(dtTmp) + (86400000 * (NumDay + 1)));
            case "w":
                return new Date(Date.parse(dtTmp) + ((86400000 * 7) * NumDay) + 86400000);
            case "m":
                return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + NumDay, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
            case "y":
                return new Date((dtTmp.getFullYear() + NumDay), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
        }

    }
    function changeattype(val) {
        $('input:radio[name=rbordertype]').removeAttr("checked")
        if (val == "1") {
            $('input:radio[name=rbordertype]:eq(1)').attr('checked', true);
            $("#tbSentTime").val("");
            $("#yuyue").show();
        }
        else {
            $('input:radio[name=rbordertype]:eq(0)').attr('checked', true);
            var d = new Date()
            var senttime = $("#hfdatenow").val();
            $("#tbSentTime").val(senttime);
            calDistanceAndFee();
            $("#yuyue").hide();
        }
    }

</script>
